import { BasicForm, FormSchema, useForm } from "@/components/Form";
import { BasicColumn, BasicTable, useTable } from "@/components/Table";
import Toolbar from "@/components/ViewComponents/Toolbar";
import "./index.less";
import { useTranslation } from "react-i18next";
const index = () => {
	const { t } = useTranslation();
	const en_vi = "Hospitalization.printExportSlip";
	const schemas: FormSchema[] = [
		{
			label: t(`${en_vi}.fromDate`),
			field: "Procedure",
			component: "DatePicker"
		},
		{
			label: t(`${en_vi}.toDate`),
			field: "To",
			component: "DatePicker"
		},
		{
			label: t(`${en_vi}.group`),
			field: "Group",
			component: "Input"
		},
		{
			label: t(`${en_vi}.department`),
			field: "Department",
			component: "Select"
		},
		{
			label: t(`${en_vi}.expirationDate`),
			field: "ExpirationDate",
			component: "DatePicker"
		}
	];
	const [formRegister] = useForm({
		schemas,
		labelWidth: 100,
		showActionButtonGroup: true,
		actionColOptions: { span: 24 },
		baseColProps: {
			span: 6
		}
	});
	const columns: BasicColumn[] = [];
	const [register] = useTable({
		columns,
		useSearchForm: false,
		bordered: true
	});
	const handlerToolbarAction = (key: string) => {
		console.log(key);
	};
	return (
		<div className="printExportSlip page">
			<div className=" page-content">
				<div className="block">
					<BasicForm register={formRegister}></BasicForm>
				</div>
				<div className="table">
					<div className="table_item">
						<BasicTable register={register}></BasicTable>
					</div>
					<div className="table_item">
						<BasicTable register={register}></BasicTable>
					</div>
					<div className="table_item">
						<BasicTable register={register}></BasicTable>
					</div>
				</div>
			</div>
			<Toolbar action={handlerToolbarAction} btnList={["save"]} />
		</div>
	);
};
export default index;
